<template>
	<view>
		<!-- 顶部导航 -->
		<fa-navbar title="还款" ref="navbar" ></fa-navbar>
		<view class="content">
			<u-form :model="form" ref="uForm">
				<u-form-item label="套餐名称"  label-width="140">
					<u-input v-model="archives_name" disabled="disabled"/>
				</u-form-item>
				<u-form-item label="套餐金额"  label-width="140">
					<u-input v-model="archives_price" disabled="disabled"/>
				</u-form-item>
				<u-form-item label="待还金额"  label-width="140">
					<u-input v-model="archives_dh_price" disabled="disabled"/>
				</u-form-item>
				<u-form-item label="付款方式" label-width="140">
				
					<u-checkbox-group @change="checkboxGroupChange2">
						<u-checkbox 
							v-model="item.checked" 
							v-for="(item, index) in list2" :key="index" 
							:name="item.name"
						>{{item.name}}</u-checkbox>
					</u-checkbox-group>
				</u-form-item>
				<u-form-item label="微信支付金额" prop="xj_price" label-width="180">
					<u-input v-model="form.wx_price" />
				</u-form-item>
				<u-form-item label="现金支付金额" prop="xj_price" label-width="180">
					<u-input v-model="form.xj_price" />
				</u-form-item>
				<!-- <u-form-item label="还款金额" label-width="140">
					<u-input v-model="form.price"/>
				</u-form-item> -->
				<!-- <u-form-item label="状态" label-width="140">
					<u-radio-group v-model="is_value" >
						<u-radio 
							@change="radioChange" 
							v-for="(item, index) in list1" :key="index" 
							:name="item.name"
							:disabled="item.disabled"
						>
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</u-form-item> -->
			</u-form>
			<u-button @click="submit" :custom-style="customStyle" style="margin-bottom: 20px;">确认</u-button>
		</view>
		<u-toast ref="uToast" />
		<!-- 底部导航 -->
		<fa-tabbar></fa-tabbar>
	</view>
</template>
<script>
	import { archives } from '@/common/fa.mixin.js';
	export default {
		mixins: [archives],
		onLoad(e) {
			let query = e || {};
			this.user_id = query.user_id || 0;
			this.archives_id = query.archives_id || 0;
			this.archives_name = query.archives_name || 0;
			this.archives_price = query.archives_price || 0;
			this.archives_dh_price = query.archives_dh_price || 0;
			this.is_update = true;
			// this.getArchives();
			// this.getListGoods();
		},
		data() {
			return {
				user_id: 0,
				archives_id: 0,
				archives_name: 0,
				archives_price: 0,
				archives_dh_price: 0,
				customStyle: {
					marginTop: '50px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: '#333',
					border: 'none',
					background: '#e0ebdd',
				},
				list: [],
				is_value: '部分',
				list2: [
					{
						name: '微信',
						checked: false,
						disabled: false
					},
					{
						name: '现金',
						checked: false,
						disabled: false
					}
				],
				list1: [
					{
						name: '部分',
						disabled: false
					},
					{
						name: '全部',
						disabled: false
					},
					
				],
				form: {
					price: '',
					type:0,
					fkfs:'',
					fkfs_id:'',
					xj_price:0,
					wx_price:0,
					goods_num: [],
					goods_ids: [],
				},
				rules: {
					name: [
						{ 
							required: true, 
							message: '请输入套餐名称', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					mobile: [
						{
							required: true, 
							message: '请输入手机号',
							trigger: ['change','blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					]
				}
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			checkboxGroupChange2(e) {
				console.log(e);
				var str = e.toString();
				this.form.fkfs = str;
			},
			radioChange(e) {
				console.log(e);
				if(e=='全部'){
					this.form.type = 1;
				}else{
					this.form.type = 0;
				}
				
			},
			inputV(item){
				console.log(item,'item')
				// this.form.goods_num = parseInt(item.gg_id)
			},
			getListGoods: async function() {
				let data = {
					id:this.archives_id
				};
				let res = await this.$api.myTcGList(data);
				console.log(res,'res')
				if(res.data.length){
					this.list = this.list.concat(res.data);
				}
			},
			checkboxGroupChange(e) {
				console.log(e);
				this.form.goods_ids = e;
			},
			submit() {

				this.$api.addTcHuan({
					xj_price:this.form.xj_price,
					wx_price:this.form.wx_price,
					fkfs:this.form.fkfs,
					fkfs_id:this.form.fkfs_id,
					type: this.form.type,
					user_id: this.user_id,
					archives_id: this.archives_id,
					price: this.form.price,
				}).then(res => {

					if(res.code == 1){
						uni.showToast({
							title: res.msg,
							icon: 'success',
							duration: 2000,
							success: function (res1) {
								setTimeout(() => {
									uni.redirectTo({
										url: '/pages/my/user_list'
									});
								}, 2000);
							},
						});
				
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'error',
							duration: 2000
						});
						
					}
					
				});
				
			},
			
			getArchives: async function() {
				let data = {};
				
				let res = await this.$api.myTcGoodsList(data);
				console.log(res,'res')
				if(res.data.length){
					this.list = this.list.concat(res.data);
					
				}
				
			},

			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				console.log(e);
				// var str = e.toString();
				this.form.goods_ids = e;
			},
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.content{
		width: 90%;margin: 10px auto;padding-bottom: 50px;
	}
	.u-checkbox{
		border-bottom: 1px solid #eee;padding:12px 0;
	}
</style>
